<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
  </head>
  <body>
    <div>
      <input type="checkbox" name="" id="apple" /><span>苹果 -</span>
      <span>10</span>
      <input type="number" name="num" value="1" min="0" />
    </div>
    <div>
      <input type="checkbox" name="" id="putao" /><span>putao -</span>
      <span>16</span>
      <input type="number" name="num" value="1" min="0" />
    </div>
    <p>总价：<span>0</span></p>
    <p><input type="checkbox" name="" id="all" />全选</p>
  </body>
  <script>
    $(function () {
      $('div :checkbox,[name="num"]').change(function () {
        var total = 0
        $('div :checkbox').each(function () {
          if ($(this).prop('checked')) {
            var price = $(this).next().next().html()
            var num = $(this).next().next().next().val()
            total += price * num
          }
        })
        $('span').last().html(total)
      })
      $('#all').change(function () {
        $('div :checkbox').prop('checked', $(this).prop('checked'))
        $('div :checkbox').change()
      })
    })
  </script>
</html>
